<!-- yangbuyi Copyright (c) https://yby6.com 2023. -->

<template>
  <el-config-provider :locale="locale">

    <div class="app-container">
      <el-container>
        <!-- 公共头 -->
        <el-header>
          <AppHeader @changeLan="changeLan"/>
        </el-header>
        <el-container>
          <!-- /公共头 -->
          <router-view/>
        </el-container>
      </el-container>
    </div>

  </el-config-provider>
</template>

<script setup name="App">
import AppHeader from "./components/AppHeader";
import en from "element-plus/es/locale/lang/en";
import zhCn from "element-plus/es/locale/lang/zh-cn";

const {proxy} = getCurrentInstance();

const locale = ref(zhCn);

function changeLan(lan) {
  if (lan === "中文") {
    locale.value = zhCn;
    proxy.$i18n.locale = "zh-cn";
  }
  if (lan === "English") {
    locale.value = en;
    proxy.$i18n.locale = "en";
  }
}
</script>
<style lang="scss">
.app-container {


  .el-header {
    padding: 0 !important;
    height: auto !important;
  }
}


.container {
  margin: 0 auto;
}

@media screen and (max-width: 500px) {
  .container {
    width: auto;
    margin: 0 auto;
  }
}
</style>
